今天要來說明Compose中為元件添加動態顯示的互動效果，這個功能是Compose原生建立的 不需要 額外在gradle依附元件（implementation dependencies）。

AnimatedVisibility

這個就是Compose中為元件新增動態顯示的效果，詳細的效果展示這邊用官方的展示動態圖給各位看，實際上還有漸變消失顯現的效果，這邊我不知道如何轉Gif動圖給各位看，就請各位實際操作就能知道了。

AnimatedVisibility的參數說明

• visible：這個就是動態顯示與否，一般來說都是配合按鈕點擊的布林變化去做配合。
• modifier：就是Modifier，前面有使用過的都知道有什麼能用。
• enter：這是一個可選參數，用於指定在元件從不可見變為可見時執行的進入過渡動畫。 您可以使用 Jetpack Compose 中提供的過渡動畫來建立自訂的動畫效果。
• exit：與enter相似，為退出的動畫顯示
• label：這是一個可選參數，通常用於提供一個描述性的標籤，以幫助輔助技術（如螢幕閱讀器）理解 UI 元素的作用。 如果沒有特殊需求，您可以將其留空。
• content：這是一個 Lambda 函數，用於定義在元件可見時應該顯示的內容。 您可以在此 Lambda 中定義任何 Composable 函數來建立可見時的 UI。

@Composable
@ComposableInferredTarget
public fun ColumnScope.AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = COMPILED_CODE,
    enter: EnterTransition = COMPILED_CODE,
    exit: ExitTransition = COMPILED_CODE,
    label: String = COMPILED_CODE,
    content: @Composable() (AnimatedVisibilityScope.() -> Unit)
): Unit

撰寫範例格式

這邊我只有寫visible、enter、exit的參數，其他的都不做改變。

AnimatedVisibility (
    visible = isExpanded,
    enter = slideInHorizontally(
        initialOffsetX = { fullWidth -> fullWidth },
        animationSpec = tween(
            durationMillis = 500,
            easing = LinearEasing
        )
    ),
    exit = fadeOut(
        animationSpec = tween(
            durationMillis = 500,
            easing = LinearEasing
        )
    )
){
    // 撰寫一些個人所需要的用法
}

程式碼撰寫

這邊我是在昨天所製作的AlertDialog顯示按鈕上進行更改，這裡面的運作邏輯說明如下：

1. FAB按鈕點擊後將拓展的參數進行反轉。
2. 並同時判斷文字顯示的布林參數是否為true。
3. 若不為true則不會展開AlertDialog，反之亦然。
4. 接著設定動態顯示並將是否展開設為isExpanded參數，每當點擊FAB按鈕時則會開啟或關閉。。
5. 接著按照開啟和關閉所設定的動畫顯示方式進行展示。
6. 這邊我的展開設定的動畫為水平向的動畫展示。
7. 關閉的動畫則是以漸變離開的方式展示。
8. 按照動畫的效果底下會展開以Row為版型的Icon、Text組合顯示。
9. 接著判斷是否為關閉狀態的縮圖Icon顯示。

以上九點就是這個的運作邏輯以及流程說明，使用效果為點擊兩次FAB按鈕才能展開AlertDialog，第一次為展開詳細名稱，第二次才會展開AlertDialog，主要應用則是達到防止誤觸進入城市的功能效果。

因為昨天的AlertDialog沒有做改變則不放上來了。

@Composable
fun GreetingBackground() {
    //...昨天的程式碼邏輯變數
    var isTextVisible by remember { mutableStateOf(false) }
    var isExpanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
    ) {
        Column(Modifier.padding(10.dp)) {
            
            // FAB按鈕動態效果更改
            FloatingActionButton(onClick = {
                    isExpanded = !isExpanded

                    if (isTextVisible) {
                        showDialog = true
                    }
                    Toast.makeText(context, "FloatingActionButton", Toast.LENGTH_SHORT).show()
                }, modifier = Modifier.align(Alignment.End)){

                    AnimatedVisibility (
                        visible = isExpanded,
                        enter = slideInHorizontally(
                            initialOffsetX = { fullWidth -> fullWidth },
                            animationSpec = tween(
                                durationMillis = 500,
                                easing = LinearEasing
                            )
                        ),
                        exit = fadeOut(
                            animationSpec = tween(
                                durationMillis = 500,
                                easing = LinearEasing
                            )
                        )
                    ) {
                        isTextVisible = true
                        Row{
                            Icon(
                                imageVector = Icons.Default.Menu,
                                contentDescription = null,
                                tint = MaterialTheme.colorScheme.onSecondary,
                                modifier = Modifier.padding(start = 5.dp)
                            )
                            Text(
                                text = "Menu",
                                fontSize = 18.sp,
                                color = Color.Black,
                                modifier = Modifier.padding(start = 5.dp, end = 5.dp)
                            )
                        }
                    }
                    if (!isExpanded){
                        isTextVisible = false
                        Icon(
                            imageVector = Icons.Default.Menu,
                            contentDescription = null,
                            tint = MaterialTheme.colorScheme.onSecondary
                        )
                    }
                }
            }
            // 其他函式
        }
        // 判斷是否開啟AlertDialog
    }
}

效果展示

• 開啟的點擊
  
• 點擊後的水平滑動效果
  
• 關閉時的漸變消失效果
  
• Zoom in 漸變消失
  

總結：

以上是今天關於元件的動態展示效果的功能，我這邊是搭配Boolean的狀態變動來顯示按鈕的展開與關閉效果。

主要是將判斷的if改成以 AnimatedVisibility 作為動態顯示的效果。以一般的做法是將前面的判斷都用 if_else 來達成按鈕開關的成效，這邊因為開頭的if替換成 AnimatedVisibility 而關閉的else條件也無法單獨存在，所以使用到了if (!isExpanded)的判斷達到else的判斷條件。

以上，謝謝各位